<template>
    <view class="my-news">
        <!-- <van-toast id="van-toast" /> -->
    <!-- 自定义顶部标题栏 -->
    <!-- <view class="top bg-gradual-blue" style="height: {{navBarHeight}}px; position: fixed;">
        <view class="cu-capsule round" style="position: absolute;top:{{navBarHeight/2}}px;">
            <view class="cu-tag bg-white" bindtap="back">返回</view>
            <view class="cu-tag line-blue"></view>
        </view>
        <view class="toptit">
            <view style="margin-top: {{navBarHeight/2}}px;">
                <text>与我相关</text>
            </view>
        </view>
    </view>
    <view style="height: {{navBarHeight}}px;"></view> -->
    <!-- 加载时显示 -->
    <!-- <view :class="[!isLoad?'loading':'',cu-load,bg-blue]" v-if="bindStatic==0"></view> -->
    <!-- 没有内容时显示 -->
    <view v-if="showDataLength<1">
        <u-empty text="还没有人回复你哟" mode="message"></u-empty>
    </view>

<!--   -->
    <view class="newView" v-for="(item,index) in showData" :key="index" 
    :data-msgId="item.msgId" :data-typeId="item.typeId" :data-id="item.id" @click="msgClik">
        <view class="source">
            <view class="headImg">
                <image :src="item.userAvatar" mode="widthFix"></image>
            </view>
            <view v-if="item.userId==myid">
                <text>你 </text>
                <text> 回复了他人</text>
            </view>
            <view v-if="item.userId!=myid">
                <text>{{item.nickName}} </text>
                <text> 回复了你</text>
            </view>
        </view>
        <view class="content">
            {{item.content}}
        </view>
    </view>
    <view class="bottomMsh" v-if="showDataLength>0">
            <!-- <view @click="bootemAddData" v-show="!addFlag" style="color: #84ADFB;">
                查看更多消息<text class="cuIcon-right"></text>
            </view> -->
            <view class="">没有更多消息了~</view>
        </view>
</view>
</template>

<script>
import {getMsgUsingGET,goMsgUsingGET} from "/common/api/aboutmy";
export default {
    data(){
        return{
            page: 1,
            size: 10,
            talk: [],
            //跳转体
            tranParma: {
                int: 0,
                typeId: 0
            },
            getBody: {
                page: 1,
                size: 8
            },
            showData: null,
            showDataLength:0,
            addFlag: true,
            bindStatic:0,
            myid: wx.getStorageSync('userInfo').id
        }
    },
    onLoad(){
      this.getMyNews()
    },
    methods:{
      getMyNews(){
        const data={page:1,size:10}
        getMsgUsingGET().then(res=>{
          this.showData=res.data.data.records
          this.showDataLength=res.data.data.records.length
        })
      },
      	//点击相应的回复
      msgClik(e) {
        let msgid = e.currentTarget.dataset.msgid;
        let typeId = e.currentTarget.dataset.typeid;
        let id = e.currentTarget.dataset.id;
        const data={
          int:null,
          typeId:null,
        }
        data.int = msgid;
        data.typeId = typeId;
        // 获取点击的数据
        goMsgUsingGET()
          .then(
            res => {
              if (res.data.code == 200) {
                // console.log("要传过去的数据");
                // console.log(res.data.data);
                // this.setData({
                //   getContent: res.data.data
                // });
                // this.goTalkDetail(msgid, id);
              }
            }, err => {
              console.log(err);
            }
          )
      },
      	//到底加载新数据
      // bootemAddData() {
      //   let getBody = this.data.getBody;
      //   getBody.page += 1;
      //   var params = utils.generateParams(getBody);
      //   console.log("第" + getBody.page + "页");
      //   getMsgUsingGET(params,null)
      //     .then(res => {
      //       if (res.data.code == 200) {
      //         if (res.data.data.records.length == 0) {
      //           console.log("空数据");
      //           this.setData({
      //             addFlag: false
      //           })
      //         } else {
      //           console.log(res);
      //           console.log(res.data.data.records);
      //           this.dataProcessing(res.data.data.records);
      //           if (res.data.data.records.length < getBody.size) {
      //             console.log("页数不够了");
      //             this.setData({
      //               addFlag: false
      //             })
      //           } else {
      //             console.log("还有数据，正常加载" + res.data.data.records.length);
      //           }
      //         }
      //       }
      //     }, err => {
      //       console.warn(err);
      //     })
      // },
    }
}
</script>

<style lang="scss" scoped>
.my-news{
  height: 100%;
  background: #fff;
  .top {
  width: 100%;
  position: fixed;
  z-index: 9;
  top: 0;
}
.top .toptit {
  display: flex;
  justify-content: center;
  font-size: 36rpx;
  font-weight: bold;
}
.newView {
  width: 700rpx;
  border-bottom: 2rpx solid #e1e1e1;
  margin: 6rpx auto;
  padding: 12rpx;
  background-color: #ffffff;
}
.newView .source {
  display: flex;
  align-items: center;
  margin-bottom: 5rpx;
}
.newView .source .headImg {
  width: 70rpx;
  height: 70rpx;
  margin-right: 10rpx;
  text-align: center;
  font-size: 42rpx;
  border: 2rpx solid rgba(120, 120, 120, 0.5);
  border-radius: 35rpx;
}
.newView .source .headImg image {
  border-radius: 35rpx;
}
.newView .source text:nth-child(1) {
  color: #8b8b8b;
}
.newView .source text:nth-child(2) {
  color: #bfbfbf;
}
.newView .content {
  padding: 16rpx 12rpx;
  position: relative;
  margin-left: 70rpx;
  background-color: #eaeaea6e;
  font-size: 36rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.newView .content .redDot {
  width: 20rpx;
  height: 20rpx;
  background-color: red;
  border-radius: 10rpx;
  position: absolute;
  top: -10rpx;
  right: -10rpx;
}
.bottomMsh {
  text-align: center;
  margin: 20rpx auto;
  margin-bottom: 40rpx;
}
}
</style>